<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3结构伪类选择器</title>
    <style>
        /*!*!*1)、选取ul的第一个子元素li添加样式   :first-child*!*!*/
        /*!*!*ul li:first-child{*!*/
            /*!*background:red;*!*/
        /*}*!*/
        /*2)、选取ul的最后一个子元素li添加样式  :last-child */
        /*ul>li:last-child{
            border:1px solid purple;
        }*/
        /*3)、选取ul的第n个子元素li添加样式  n从1开始序号 支持两个关键字  even(偶数)   odd(奇数)*/
        /*ul li:nth-child(odd){
            border:1px solid red;
        }*/
        /*4)、选择父元素里第一个类型为p的元素  :first-of-type*/
        /*p:first-of-type{
            background:red;
        }*/
        /*5)、选择父元素里最后一个类型为p的元素   :last-of-type*/
        /*p:last-of-type{
            background:red;
        }*/

        /*6)、选择父元素里第n个类型为p的元素*/
         p:nth-of-type(3){
            background:red;
            color:#fff;
            font-size:28px;
            font-weight:700;


        }
    </style>
</head>
<body>
<p>p1</p>

<h1>h1</h1>

<p>p2</p>

<h1>h2</h1>

<p>p3</p>

<h1>h3</h1>

<p>p4</p>

<h1>h4</h1>

<p>p5</p>

<h1>h5</h1>

<p>p6</p>

<h1>h6</h1>

<p>p7</p>

<h1>h7</h1>

<p>p8</p>

<h1>h8</h1>
<ul>
    <li>
        <p>li1</p>
    </li>
    <li>
        <p>li2</p>
    </li>
    <li>
        <p>li3</p>
    </li>
    <li>
        <p>li4</p>
    </li>
    <li>
        <p>li5</p>
    </li>
    <li>
        <p>li6</p>
    </li>
    <li>
        <p>li7</p>
    </li>
    <li>
        <p>li8</p>
    </li>
</ul>
</body>
</html>